<template>
	<view class="content">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block style="color: #777777;font-size: 48rpx;" slot="content">企业详情</block>
		</cu-custom>
		<!-- config-echarts.js中的seriesTemplate为option.series模板，可以作为series中的默认配置，:chartData.series中的配置如果有相同的，会覆盖掉 seriesTemplate 中的配置 -->
		<view class="bg-white">
			<view class="flex">
				<view class="flex-sub bg-grey radius my-b bg0">
					<!-- <view class="bg_pic"></view> -->
					<text class="title">设备总数</text>
					<text class="num">{{deviceTotal}}</text>
				</view>
				<view class="flex-sub bg-grey radius my-b bg1">
					<!-- <view class="bg_pic"></view> -->
					<text class="title">任务领取率</text>
					<text class="num">{{taskRate}}</text>
				</view>
			</view>
			<view class="flex">
				<view class="flex-sub bg-grey radius my-b bg2">
					<!-- <view class="bg_pic"></view> -->
					<text class="title">用户总数</text>
					<text class="num">{{userTotal}}</text>
				</view>
				<view class="flex-sub bg-grey radius my-b bg3">
					<!-- <view class="bg_pic"></view> -->
					<text class="title">在线用户数</text>
					<text class="num">{{onlineTotal}}</text>
				</view>
			</view>
		</view>


		<view class="bg-white">
			<view class="flex solid-bottom justify-around">
				<view class="padding-sm margin-xs radius">
					<button style="border: 1px solid #FABD50;" class="cu-btn round bg-white" @click="xfsb">消防设备</button>
				</view>
				<view class="padding-sm margin-xs radius">
					<button class="cu-btn round bg-system-orange" @click="wlwsb">物联网设备</button>
				</view>
			</view>
		</view>

		<view class="bg-white">
			<!-- 演示动态改变eopts -->
			<qiun-data-charts type="ring" :opts="opts" :eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true"
				:echartsApp="true" />
		</view>

		<view class="content">
			<ul>
				<li>
					<text>企业名称：{{enterpriseName}}</text>
				</li>
				<li>
					<text>负责人：{{contacts}}</text>
				</li>
				<li>
					<text>负责人电话：{{mobile}}</text>
				</li>
				<li>
					<text>省市县：{{provinceCityCountry}}</text>
				</li>
				<li>
					<text>详细地址：{{address}}</text>
				</li>
			</ul>
		</view>

		<map class="my-map" :latitude="latitude" :longitude="longitude" :markers="covers">
		</map>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			// 封装参数
			let params = {
				"enterpriseId": option.ucId
			}
			let that = this
			// 请求数据
			let app = getApp()
			app.globalData.request({
				url: 'wx/inspect/getEnterpriseDetail/' + option.ucId,

			}).then(function(res) {
				console.info(res)
				that.deviceTotal = res.data.data.deviceTotal
				that.taskRate = res.data.data.taskRate
				that.userTotal = res.data.data.userTotal
				that.onlineTotal = res.data.data.onlineTotal

				that.enterpriseName = res.data.data.enterpriseName
				that.contacts = res.data.data.contacts
				that.mobile = res.data.data.mobile
				that.provinceCityCountry = res.data.data.provinceCityCountry
				that.address = res.data.data.address

				that.latitude = res.data.data.latitude
				that.longitude = res.data.data.longitude
				that.chartsDataPie2 = res.data.data.fireDevice
				that.covers = [{
					id: Math.ceil(Math.random() * 100),
					label: {
						content: that.enterpriseName,
						fontSize: 12,
					},
					width: 32,
					height: 32,
					latitude: that.latitude,
					longitude: that.longitude,
					iconPath: '../../static/test/localtion.png'
				}]
			}).catch(function(e) {

			})
		},
		// chartsDataPie2: {
		// 	"series": [{
		// 		"data": []
		// 	}]
		// },

		data() {
			return {
				deviceTotal: '',
				taskRate: '',
				userTotal: '',
				onlineTotal: '',
				enterpriseName: '',
				contacts: '',
				mobile: '',
				provinceCityCountry: '',
				address: '',
				chartsDataPie2: {
					"series": [{
						"data": [{}],
					}]
				},

				latitude: '',
				longitude: '',
				covers: [],

				opts: {
					"type": "ring",
					"padding": [5, 5, 5, 5],
					"rotate": false,
					"dataLabel": true,
					"legend": {
						"show": true,
						"position": "bottom",
						"lineHeight": 25,
					},
					"title": {
						"name": "",
						"fontSize": 15,
						"color": "#666666"
					},
					"subtitle": {
						"name": "",
						"fontSize": 25,
						"color": "#7cb5ec"
					},
					"extra": {
						"ring": {
							"ringWidth": 30,
							"activeOpacity": 0.5,
							"activeRadius": 10,
							"offsetAngle": 0,
							"labelWidth": 15,
							"border": true,
							"borderWidth": 3,
							"borderColor": "#FFFFFF"
						},
					},
				},
				ringOpts: {


				},

			};
		},
		onReady() {
			// setTimeout(() => {
			// 	this.getServerData();
			// }, 1000);


		},
		methods: {

			// getServerData() {
			// 	let data = {

			// 	}
			// 	this.chartsDataPie2 = JSON.parse(JSON.stringify(data))
			// },
			xfsb() {
				let data = {
					"series": [{
						"data": [{
							"name": "消防泵",
							"value": 50
						}, {
							"name": "讯响器",
							"value": 30
						}, {
							"name": "排烟机",
							"value": 20
						}, {
							"name": "点型烟感",
							"value": 16
						}, {
							"name": "防火卷帘",
							"value": 12
						}, {
							"name": "应急照明",
							"value": 6
						}]
					}]
				}
				// this.chartsDataPie2.series[0].data = 
				this.chartsDataPie2 = JSON.parse(JSON.stringify(data))
			},
			wlwsb() {
				let data = {
					"series": [{
						"data": [{
							"name": "消防泵",
							"value": 50
						}, {
							"name": "讯响器",
							"value": 30
						}]
					}]
				}
				this.chartsDataPie2 = JSON.parse(JSON.stringify(data))
			},
		}
	};
</script>

<style>
	.my-b {
		height: 350rpx;
		border-radius: 28rpx;
		border-radius: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10rpx 10rpx;
	}

	.bg0 {
		background: url(/static/qyxq/icon_shebeizongshu.png) no-repeat center;
	}

	.bg1 {
		background: url(/static/qyxq/icon_renwulingqulv.png) no-repeat center;
	}

	.bg2 {
		background: url(/static/qyxq/icon_yonghuzongshu.png) no-repeat center;
	}

	.bg3 {
		background: url(/static/qyxq/icon_zaixianyonghushu.png) no-repeat center;
	}

	.bg_pic {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background-color: #FFFFFF;
		margin-top: 41rpx;
	}

	.title {
		margin-top: 217rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.num {
		font-size: 48rpx;
		color: #333333;
	}

	.content {
		margin-top: 24rpx;
		background-color: #FFFFFF;
	}

	ul li {
		list-style: none;
		margin: 0;
		padding: 0;
		margin-left: 24rpx;
		position: relative;
	}

	li text {
		font-size: 24rpx;
		color: #777777;
		line-height: 94rpx;
	}

	li::after {
		content: '';
		position: absolute;
		left: 2rpx;
		bottom: 0;
		right: 2rpx;
		height: 1px;
		background-color: #dcdcdc;
	}

	.my-map {
		width: 100%;
		margin: 40rpx 0;
	}
</style>
